
import 'dart:convert' as convert;

import 'package:flutter/cupertino.dart';
import 'package:flutter_svg/svg.dart';
import 'package:trollee/app/components/custom_button.dart';
import 'package:trollee/app/components/custom_button_cancel.dart';
import 'package:trollee/app/components/custom_text_input_decoration.dart';
import 'package:trollee/app/core/core.dart';
import 'package:trollee/app/modules/auth/login/controller.dart';

// ignore: must_be_immutable
class LoginPage extends StatelessWidget {
   LoginPage({Key? key}) : super(key: key);

  final controller = Get.put(LoginController());
  final states = Get.find<LoginController>().states;

  Locale selectLocale = AppLocaleUtil.currentLocale;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Column(
        children: [
          Container(
            height: AppDimens.dp196,
            width: AppDimens.sw,
            color: AppColors.primary_color,
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: [
                SvgPicture.asset(AppImages.trollee_logo_svg_while)
                    .paddingOnly(bottom: AppDimens.dp24),
                Positioned(
                    top: AppDimens.dp48,
                    right: AppDimens.dp28,
                    child: SvgPicture.asset(AppImages.language_select)
                        .clickOnce(() {
                      switchLanguage(context);
                    }))
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.all(AppDimens.dp24),
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                      borderRadius: AppRadii.k8pxRadius,
                      color: AppColors.text_background_grey,
                  ),
                  child: TextField(
                    controller: controller.textEditingControllerUserName,
                    decoration: CustomTextInputDecoration.buildInputDecoration(
                        'username'.tr,
                        Icon(
                          Icons.person,
                          size: AppDimens.dp16,
                        )),
                  ),
                ),
                AppGaps.vGap16,
                Container(
                  decoration: BoxDecoration(
                      borderRadius: AppRadii.k8pxRadius,
                      color: AppColors.text_background_grey),
                  child: TextField(
                    controller: controller.textEditingControllerPassword,
                    obscureText: true,
                    decoration: CustomTextInputDecoration.buildInputDecoration(
                        'password'.tr,
                        Icon(
                          Icons.lock_outline,
                          size: AppDimens.dp16,
                        )),
                  ),
                ),
                AppGaps.vGap16,
                Row(
                  children: [
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          borderRadius: AppRadii.k8pxRadius,
                          color: AppColors.text_background_grey),
                      child: TextField(
                        controller: controller.textEditingControllerCode,
                        keyboardType: TextInputType.text,
                        decoration: CustomTextInputDecoration.buildInputDecoration(
                          'verification_code'.tr,
                          Icon(
                            Icons.verified_user_outlined,
                            size: AppDimens.dp16,
                          ),
                        ),
                      ),
                    )),
                    AppGaps.hGap16,
                    SizedBox(
                      width: AppDimens.dp92,
                      height: AppDimens.dp24,
                      child: Obx(() {
                        if(controller.codeImg.value != '') {
                          return Image.memory(convert.base64Decode(controller.codeImg.value));
                        } else {
                          return const SizedBox();
                        }
                      }),
                    ).click(controller.getCode),
                  ],
                ),
              ],
            ),
          ),
          Expanded(child: Container()),
          Padding(
            padding: EdgeInsets.all(AppDimens.dp24),
            child: Column(
              children: [
                CustomButton.big(
                    height: AppDimens.dp48,
                    color: AppColors.primary_color,
                    text: 'login'.tr,
                    onPressed: controller.loginDo,
                ),
                AppGaps.vGap16,
                CustomButtonCancel(
                  height: AppDimens.dp48,
                  width: AppDimens.sw,
                  textStyle: AppTextStyles.text_16_bold_grey,
                  text: 'reset_account'.tr,
                  onPressed: controller.reset,
                ),
                AppGaps.vGap20,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Obx(() {
                      return SvgPicture.asset(controller.isSelect.value
                          ? AppImages.remember_choose_selected
                          : AppImages.remember_choose_unselected);
                    }),
                    AppGaps.hGap4,
                    Text(
                      'remember_me'.tr,
                      style: AppTextStyles.title4_14_Regular_grey,
                    ),
                  ],
                ).click(controller.rememberChoose),
                AppGaps.vGap20
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 切换语言弹框
  switchLanguage(BuildContext context) {
    int i = 0;
    i = AppLocaleUtil.supportedLocales.indexOf(AppLocaleUtil.currentLocale);
    showModalBottomSheet(
        context: context,
        shape: AppRadii.roundedRectangleBorder,
        builder: (context) {
          return SizedBox(
            height: AppDimens.dp256,
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    top: AppDimens.dp12,
                    bottom: AppDimens.dp12,
                    left: AppDimens.dp16,
                    right: AppDimens.dp16,
                  ),
                  decoration: BoxDecoration(
                      color: AppColors.background_color_white,
                      borderRadius: AppRadii.top(
                        AppDimens.dp10,
                      )),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'cancel'.tr,
                        style: AppTextStyles.text_14_Regular_black,
                      ).clickOnce(() {
                        Navigator.pop(context);
                      }),
                      CustomButton.small(
                          height: AppDimens.dp32,
                          text: 'sure'.tr,
                          width: AppDimens.dp64,
                          borderWidth: AppDimens.dp6,
                          onPressed: () {
                            AppLocaleUtil.updateLang(selectLocale);
                            Navigator.pop(context);
                          })
                    ],
                  ),
                ),
                Expanded(child: CupertinoPicker.builder(
                    itemExtent: AppDimens.dp56,
                    childCount: controller.states.languageList.length,
                    scrollController: FixedExtentScrollController(initialItem: i),
                    onSelectedItemChanged: (onSelectedItemChanged) {
                      selectLocale = AppLocaleUtil.supportedLocales[onSelectedItemChanged];
                      },
                    itemBuilder: (context, index) {
                      return Container(
                        height: AppDimens.dp60,
                        alignment: Alignment.center,
                        child: Text(controller.states.languageList[index]),
                      );
                    }))
              ],
            ),
          );
        });
  }



}
